<template>
  <div class="app-container">

    <!--    <el-tabs v-if="pageType == 'SportScience'" v-model="activeName" @tab-click="handleClick">-->
    <!--      <el-tab-pane label="Nutrition" name="tab1"/>-->
    <!--      <el-tab-pane label="Psychology" name="tab2"/>-->
    <!--      <el-tab-pane label="Others" name="tab3"/>-->
    <!--    </el-tabs>-->
    <!-- {{query.id}} -->
    <template v-if="!query.id">
      <el-tabs v-if="pageType == 'SportScience'" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="Nutrition" name="tab1" />
        <el-tab-pane label="Psychology" name="tab2" />
        <el-tab-pane label="Others" name="tab3" />
        <!--      <el-tab-pane label="Biomechanics" name="tab4" />
      <el-tab-pane label="Strength and Conditioning" name="tab5" /> -->
      </el-tabs>

      <el-tabs v-else-if="pageType == 'Medication'" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="Anti-doping" name="mn1" />
        <el-tab-pane label="Drugs" name="mn2" />
        <el-tab-pane label="TUE" name="mn3" />
      </el-tabs>

      <el-tabs v-else-if="pageType == 'SportMedicine'" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="General Practitioner" name="sm1" />
        <el-tab-pane label="Orthopedics" name="sm2" />
        <el-tab-pane label="Prosthetics & Orthotics" name="sm3" />
        <el-tab-pane label="Physiotherapy" name="sm4" />
        <el-tab-pane label="Ophthalmology" name="sm5" />
        <el-tab-pane label="Others" name="tab3" />
      </el-tabs>
    </template>
    <template v-else>
      <h3 class="el-form-title" style="margin-top: 5px" v-if="info.type === 'DOPING'">Anti-doping Form</h3>
      <h3 class="el-form-title" style="margin-top: 5px" v-else-if="info.type === 'MEDICATION'">Drugs Form</h3>
      <h3 class="el-form-title" style="margin-top: 5px" v-else-if="info.type === 'TUE'">TUE Form</h3>
      <h3 class="el-form-title" style="margin-top: 5px" v-else>{{ info.category ? info.category + ' Form' : '' }}</h3>
    </template>
    <h3 v-if="pageType == 'Classification'" class="el-form-title">Classification Form</h3>
    <!--    ime-mode: disabled-->
    <div id="print" ref='print' :class="info.modify ? 'container-fluid add-page':'container-fluid add-page disabled-input'">
      <el-form ref="info" :model="info" :rules="rules">
        <!-- Medication 标题显示 str-->
        <h3 v-if="activeName == 'mn3'" style="margin-top: 0">TUE</h3>
        <h3 v-if="activeName == 'mn2'" style="margin-top: 0">Drugs</h3>
        <h3 v-if="activeName == 'mn1'" style="margin-top: 0">Anti-doping</h3>
        <!-- Medication 标题显示 end-->

        <el-row v-if="pageType === 'Classification'" :gutter="20" class="solid-row">
          <el-col :sm="11" :md="11" :lg="10" :xl="7">
            <div class="ul-input"><label class="label-md cur">Athlete: </label>
              <el-autocomplete
                v-if="!inputReadonly"
                v-model="athleteData.name"
                :fetch-suggestions="queryAthleteSearchAsync"
                :clearable="true"
                placeholder="Athlete name"
                :readonly="inputReadonly"
                @select="athleteshandleSelect"
                @blur="athleteshandleBlur"
              />
              <input v-else v-model="athleteData.name" :readonly="inputReadonly">
            </div>
            <div class="ul-input"><label class="label-md">Sports: </label>
              <el-select v-model="info.sports" :placeholder="inputReadonly?'':'Select'" :disabled="inputReadonly">
                <template v-for="item in sports">
                  <el-option v-if="info.sports === item.id || item.isDelete !== 1" :key="item.value" :label="item.typeName" :value="item.id" />
                </template>
              </el-select>
<!--              <template v-else>-->
<!--                <input v-for="item in sports" v-if="item.id === info.sports" v-model="item.typeName" :readonly="inputReadonly">-->
<!--              </template>-->
            </div>
            <div class="ul-input"><label class="label-md">Sports Classes: </label><input v-model="info.sportsClasses" :readonly="inputReadonly"></div>
            <div class="ul-input"><label class="label-md">Date: </label>
              <el-date-picker v-model="info.selectDate" type="date" placeholder="Date Picker" format="dd-MM-yyyy" value-format="yyyy-MM-dd" style="width: 100%;" :readonly="inputReadonly" />
            </div>
            <div class="ul-input"><label class="label-md">Place: </label><input v-model="info.place" :readonly="inputReadonly"></div>
            <div v-if="query.id" class="ul-input"><label>Creator: </label><input :value="info.creatorLastName + ' ' +info.creatorFirstName" :readonly="true"></div>
          </el-col>
          <el-col :sm="11" :md="11" :lg="10" :xl="7" :offset="1">
            <div class="ul-input"><label class="label-lg">Class Status: </label>
              <template v-if="!inputReadonly">
                <el-radio v-model="info.sportsStatus" label="New">New</el-radio>
                <!--                <el-radio v-else label="New">New</el-radio>-->
                <el-radio v-model="info.sportsStatus" label="National">National</el-radio>
                <el-radio v-model="info.sportsStatus" label="Review">Review</el-radio>
              </template>
              <input v-else v-model="info.sportsStatus" :readonly="inputReadonly">
            </div>
            <div v-if="!inputReadonly" class="ul-input"><label class="label-lg hide">Sports Status: </label>
              <el-radio v-model="info.sportsStatus" label="Review + F xDate">Review + F xDate</el-radio>
              <el-date-picker v-if="info.sportsStatus === 'Review + F xDate'" v-model="info.datePicker" :readonly="info.sportsStatus !== 'Review + F xDate' || inputReadonly" type="date" placeholder="Date Picker" format="dd-MM-yyyy" value-format="yyyy-MM-dd" style="width: 100%;"/>
            </div>
            <div v-if="!inputReadonly" class="ul-input"><label class="label-lg hide">Sports Status: </label>
              <el-radio v-model="info.sportsStatus" label="Confirm">Confirm</el-radio>
            </div>
            <div class="ul-input"><label class="label-lg">Classified by: </label><input v-model="info.clasifedBy" :readonly="inputReadonly"></div>
            <div class="ul-input"><label class="label-lg">Classified at Event: </label><input v-model="info.clasifeEvent" :readonly="inputReadonly"></div>
          </el-col>
        </el-row>
        <el-row v-else :gutter="20" class="solid-row">
          <template v-if="activeName == 'tab3'">
            <el-col :sm="10" :md="8" :lg="7" :xl="5">
              <div class="ul-input"><label>Category: </label>
                <el-select v-model="info.categoryType" :placeholder="inputReadonly?'':'Select'" :disabled="inputReadonly">
                  <template v-for="item in categorys">
                    <el-option v-if="info.categoryType === item.id || item.isDelete !== 1" :key="item.value" :label="item.typeName" :value="item.id"/>
                  </template>
                </el-select>
<!--                <template v-else>-->
<!--                  <input v-for="item in categorys" v-if="item.id === info.categoryType" v-model="item.typeName" :readonly="inputReadonly">-->
<!--                </template>-->
              </div>
            </el-col>
            <el-col :span="12" :offset="12" />
          </template>
          <el-col :sm="10" :md="8" :lg="7" :xl="5">
            <div class="ul-input">
              <label>Sports: </label>
              <el-select v-model="info.sports" :placeholder="inputReadonly?'':'Select'" :disabled="inputReadonly">
                <template v-for="item in sports">
                  <el-option v-if="item.id === info.sports || item.isDelete !== 1" :key="item.value" :label="item.typeName" :value="item.id" />
                </template>
              </el-select>
              <!--              <template v-else>-->
              <!--                <input v-for="item in sports" v-if="item.id === info.sports" v-model="item.typeName" :readonly="inputReadonly">-->
              <!--              </template>-->
            </div>
            <div class="ul-input"><label class="cur">Athlete: </label>
              <el-autocomplete
                v-if="!inputReadonly"
                v-model="athleteData.name"
                :fetch-suggestions="queryAthleteSearchAsync"
                :clearable="false"
                placeholder="Athlete name"
                :readonly="inputReadonly"
                @select="athleteshandleSelect"
                @blur="athleteshandleBlur"
              /><input v-else v-model="athleteData.name" :readonly="inputReadonly"></div>
            <div v-if="activeName != 'mn2' && activeName != 'mn3'" class="ul-input"><label class="label-lg" style="text-align: left;max-width: 135px;">Person In Charge:  </label><input
              v-model="info.pic"
              :readonly="inputReadonly"
            ></div>
            <div v-if="query.id" class="ul-input"><label>Creator: </label><input :value="info.creatorLastName + ' ' +info.creatorFirstName" :readonly="true"></div>
          </el-col>
          <el-col :sm="10" :md="8" :lg="7" :xl="5">
            <div class="ul-input"><label>Date: </label>
              <el-date-picker v-model="info.selectDate" type="date" placeholder="Date Picker" format="dd-MM-yyyy" value-format="yyyy-MM-dd" style="width: 100%;" :readonly="inputReadonly" />
            </div>
            <div v-if="activeName != 'mn2' && activeName != 'mn3'" class="ul-input"><label>Venue: </label>
              <el-select v-model="info.venue" :placeholder="inputReadonly?'':'Select'" :disabled="inputReadonly">
                <template v-for="item in typesVenue">
                  <el-option v-if="info.venue === item.id || item.isDelete !== 1" :key="item.value" :label="item.typeName" :value="item.id" />
                </template>
              </el-select>
            </div>
            <div v-if="activeName != 'mn2' && activeName != 'mn3'" class="ul-input"><label>Organizer: </label><input v-model="info.organizer" :readonly="inputReadonly"></div>
            <div v-if="activeName == 'mn2' || activeName == 'mn3'" class="ul-input"><label class="label-xl" style="max-width: 135px;">Person In Charge: </label><input v-model="info.pic" :readonly="inputReadonly"></div>
          </el-col>
        </el-row>
        <!-- Sport Science - Physiotherapy -->

        <div v-if="activeName == 'sm4'">
          <el-row :gutter="20" class="solid-row">
            <el-col :sm="24" :md="24" :lg="20" :xl="13">
              <div class="ul-input ul-bold"><label class="label-md">Review Session: </label>
                <el-checkbox-group v-if="!inputReadonly" v-model="info.bodyDesc.physiotherapy.reviewSession">
                  <el-checkbox v-for="value in reviewSessionA" :key="value" :label="value" />
                </el-checkbox-group>
                <el-checkbox-group v-else v-model="info.bodyDesc.physiotherapy.reviewSession">
                  <el-checkbox v-for="value in reviewSessionA" :key="value" disabled :label="value" />
                </el-checkbox-group>
                <input v-model="info.bodyDesc.physiotherapy.reviewOthers" :readonly="inputReadonly">
              </div>
            </el-col>
            <el-col :sm="24" :md="24" :lg="20" :xl="13">
              <div class="ul-input ul-bold"><label class="label-md">Type of Injury: </label>
                <el-checkbox-group v-if="!inputReadonly" v-model="info.bodyDesc.physiotherapy.typeInjury">
                  <el-checkbox v-for="value in typeInjury" :key="value" :label="value" />
                </el-checkbox-group>
                <el-checkbox-group v-else v-model="info.bodyDesc.physiotherapy.typeInjury">
                  <el-checkbox v-for="value in typeInjury" :key="value" disabled :label="value" />
                </el-checkbox-group>
                <!--                <input v-else v-model="info.bodyDesc.physiotherapy.typeInjury" :readonly="inputReadonly">-->
                <el-date-picker
                  v-model="info.bodyDesc.physiotherapy.typeOfInJuryDate"
                  type="date"
                  :placeholder="inputReadonly?'':'Date Picker'"
                  format="dd-MM-yyyy"
                  value-format="yyyy-MM-dd"
                  style="width: 100%;flex: 4;margin-left: 10px"
                  :readonly="inputReadonly"
                />
              </div>
            </el-col>
            <el-col :sm="24" :md="24" :lg="20" :xl="13">
              <div class="ul-input ul-bold"><label class="label-md">Cause of Injury: </label>
                <el-checkbox-group v-if="!inputReadonly" v-model="info.bodyDesc.physiotherapy.causeInjury">
                  <el-checkbox v-for="value in reviewSessionA" :key="value" :label="value" />
                </el-checkbox-group>
                <el-checkbox-group v-else v-model="info.bodyDesc.physiotherapy.causeInjury">
                  <el-checkbox v-for="value in reviewSessionA" :key="value" disabled :label="value" />
                </el-checkbox-group>
                <el-date-picker
                  v-model="info.bodyDesc.physiotherapy.causeOfInjuryDate"
                  type="date"
                  :placeholder="inputReadonly?'':'Date Picker'"
                  format="dd-MM-yyyy"
                  value-format="yyyy-MM-dd"
                  style="width: 100%;flex: 4;margin-left: 10px"
                  :readonly="inputReadonly"
                />
              </div>
            </el-col>
          </el-row>
          <h3>Diagnosis - Parts of Body Injured</h3>
          <el-row :gutter="20" class="solid-row">
            <el-col :sm="24" :md="24" :lg="24" :xl="24">
              <div class="ul-input ul-bold" style="justify-content:end"><label class="label-md">Head: </label>
                <el-checkbox-group v-if="!inputReadonly" v-model="info.bodyDesc.physiotherapy.reviewSessionB">
                  <el-checkbox v-for="value in reviewSessionB" :key="value" :label="value" style="width: 100px;text-align: left;" />
                </el-checkbox-group>
                <el-checkbox-group v-else v-model="info.bodyDesc.physiotherapy.reviewSessionB">
                  <el-checkbox v-for="value in reviewSessionB" :key="value" :label="value" disabled style="width: 100px;text-align: left;" />
                </el-checkbox-group>
              </div>
            </el-col>

            <el-col :sm="24" :md="24" :lg="24" :xl="24">
              <div class="ul-input ul-bold" style="justify-content:end"><label class="label-md">Neck / Trunk: </label>
                <el-checkbox-group v-if="!inputReadonly" v-model="info.bodyDesc.physiotherapy.neckTrunk">
                  <el-checkbox v-for="value in neckTrunk" :key="value" :label="value" style="width: 100px;text-align: left;" />
                </el-checkbox-group>
                <el-checkbox-group v-else v-model="info.bodyDesc.physiotherapy.neckTrunk">
                  <el-checkbox v-for="value in neckTrunk" :key="value" :label="value" disabled style="width: 100px;text-align: left;" />
                </el-checkbox-group>
              </div>
            </el-col>
            <el-col :sm="24" :md="24" :lg="24" :xl="24">
              <div class="ul-input ul-bold" style="justify-content:end"><label class="label-md">Upper Limbs: </label>
                <el-checkbox-group v-if="!inputReadonly" v-model="info.bodyDesc.physiotherapy.upperLimbsA">
                  <el-checkbox v-for="value in upperLimbsA" :key="value" :label="value" style="width: 100px;text-align: left;" />
                </el-checkbox-group>
                <el-checkbox-group v-else v-model="info.bodyDesc.physiotherapy.upperLimbsA">
                  <el-checkbox v-for="value in upperLimbsA" :key="value" :label="value" disabled style="width: 100px;text-align: left;" />
                </el-checkbox-group>
              </div>
            </el-col>

            <el-col :sm="24" :md="24" :lg="24" :xl="24">
              <div class="ul-input ul-bold" style="justify-content:end"><label class="label-md">Upper Limbs: </label>
                <el-checkbox-group v-if="!inputReadonly" v-model="info.bodyDesc.physiotherapy.upperLimbsB">
                  <el-checkbox v-for="value in upperLimbsB" :key="value" :label="value" style="width:100px;text-align: left;" />
                </el-checkbox-group>
                <el-checkbox-group v-else v-model="info.bodyDesc.physiotherapy.upperLimbsB">
                  <el-checkbox v-for="value in upperLimbsB" :key="value" :label="value" disabled style="width:100px;text-align: left;" />
                </el-checkbox-group>
              </div>
            </el-col>
            <el-col :sm="24" :md="24" :lg="20" :xl="13">
              <div class="ul-input ul-bold"><label class="label-sm">Others: </label><input v-model="info.bodyDesc.physiotherapy.DiagnosisOthers" :readonly="inputReadonly"></div>
            </el-col>
            <el-col v-if="activeName === 'sm4' && info.bodyDesc.physiotherapy.diagnosisImg !== undefined" :sm="24" :md="24" :lg="24" :xl="24">
              <draw ref="mychild" :imgs="info.bodyDesc.physiotherapy.diagnosisImg" :input-readonly="inputReadonly" />
            </el-col>
          </el-row>
          <h3>Nature of Injury</h3>
          <el-row :gutter="20" class="solid-row">
            <el-col v-for="item in info.bodyDesc.physiotherapy.natureInjury" :key="item.key" :sm="24" :md="24" :lg="24" :xl="24">
              <div class="ul-input" style="justify-content:end"><label class="label-md hide">Others: </label>
                <el-checkbox-group v-if="!inputReadonly" v-model="item.checkedCities">
                  <el-checkbox v-for="value in item.list" :key="value" :label="value" style="width: 180px;text-align: left;" />
                </el-checkbox-group>
                <el-checkbox-group v-else v-model="item.checkedCities">
                  <el-checkbox v-for="value in item.list" :key="value" :label="value" disabled style="width: 180px;text-align: left;" />
                </el-checkbox-group>
              </div>
            </el-col>
            <el-col :sm="24" :md="24" :lg="20" :xl="13">
              <div class="ul-input"><label class="label-md">Others: </label><input v-model="info.bodyDesc.physiotherapy.natureInjuryOthers" :readonly="inputReadonly"></div>
            </el-col>
          </el-row>
        </div>

        <!-- Sport Science - Psychology -->

        <el-row
          v-if="activeName == 'tab2' || activeName == 'tab1' || activeName == 'sm2' || activeName == 'sm3' || activeName == 'sm4'|| activeName == 'sm5'"
          :gutter="20"
          class="solid-row"
        >
          <template v-if="activeName == 'sm2' || activeName == 'sm3' || activeName == 'sm5'">
            <el-col :span="24">
              <div class="ul-input"><label class="label-sm">Diagnosis: </label><input v-model="info.bodyDesc.diagnosis" :readonly="inputReadonly"></div>
            </el-col>
          </template>
          <template v-if="activeName == 'tab1'">
            <el-col :span="24">
              <div class="ul-input"><label class="label-sm">Diagnosis: </label><input v-model="info.bodyDesc.diagnosis" :readonly="inputReadonly"></div>
            </el-col>
            <el-col :span="8">
              <div class="ul-input"><label class="label-md">Weight(KG): </label><input v-model="info.bodyDesc.weight" :readonly="inputReadonly"></div>
            </el-col>
            <el-col :span="8">
              <div class="ul-input"><label>Height(CM): </label><input v-model="info.bodyDesc.height" :readonly="inputReadonly"></div>
            </el-col>
          </template>
          <el-col :span="24">
            <div class="ul-input"><label class="label-sm">Findings: </label><input v-model="info.bodyDesc.findings" :readonly="inputReadonly"></div>
            <div class="ul-input ul-textarea"><label class="label-lg">Progress/<br>Recommendation: </label><textarea
              v-model="info.bodyDesc.progress_recommendation"
              :readonly="inputReadonly"
            >Text</textarea></div>
          </el-col>
        </el-row>
        <!-- Sport Science - Nutrition -->
        <el-row v-if="activeName == 'tab1' && info.bodyDesc" :gutter="20" class="solid-row">
          <el-col :sm="12" :md="8" :lg="7" :xl="7">
            <div class="ul-input ul-textarea"><label class="label-sm">Athlete: </label>
              <textarea v-model="info.bodyDesc.athlete" :readonly="inputReadonly" /></div>
            <div class="ul-input ul-textarea"><label class="label-sm">Person In Charge: </label><textarea v-model="info.pic" :readonly="inputReadonly" /></div>
          </el-col>
          <el-col :sm="12" :md="8" :lg="7" :xl="7">
            <h3 style="margin-top: 0;">Recommendation:</h3>
            <div class="ul-input"><label>Breakfast: </label><input v-model="info.bodyDesc.recommendation.breakfast" :readonly="inputReadonly"></div>
            <div class="ul-input"><label>Elevenses: </label><input v-model="info.bodyDesc.recommendation.elevenses" :readonly="inputReadonly"></div>
            <div class="ul-input"><label>Lunch: </label><input v-model="info.bodyDesc.recommendation.lunch" :readonly="inputReadonly"></div>
            <div class="ul-input"><label>Tea: </label><input v-model="info.bodyDesc.recommendation.tea" :readonly="inputReadonly"></div>
          </el-col>
          <el-col :sm="12" :md="8" :lg="7" :xl="7">
            <h3 style="margin-top: 0;" class="hide">Recommendation:</h3>
            <div class="ul-input"><label>Supper: </label><input v-model="info.bodyDesc.recommendation.supper" :readonly="inputReadonly"></div>
            <div class="ul-input"><label>Dinner: </label><input v-model="info.bodyDesc.recommendation.dinner" :readonly="inputReadonly"></div>
            <!--            <div class="ul-input"><label style="width: 180px;flex: inherit;">After Training Snack: </label><input-->
            <!--              value="Text"-->
            <!--            ></div>-->
            <div class="ul-input ul-textarea"><label>Others: </label><textarea v-model="info.bodyDesc.recommendation.others" :readonly="inputReadonly" /></div>
          </el-col>
        </el-row>
        <!-- Sport Science - Psychology -->
        <el-row v-if="activeName == 'sm1'" :gutter="20" class="solid-row">
          <el-col :span="24">
            <h3 style="margin-top: 0;">Diagnosis & Progress:</h3>
            <div class="ul-input"><textarea v-model="info.bodyDesc.diagnosis_progress" :readonly="inputReadonly">Text</textarea></div>
          </el-col>
        </el-row>
        <!-- Medication Doping -->
        <div v-if="activeName == 'mn1' || activeName == 'mn2' || activeName == 'mn3'">
          <el-row v-if="activeName == 'mn1'" :gutter="20" class="solid-row">
            <h3 style="margin-top: 0;">Whereabouts</h3>
            <el-col :span="24" :md="24" :lg="24" :xl="15">
              <div class="ul-input"><label class="label-md">Sports Status: </label>
                <template v-if="!inputReadonly">
                  <el-radio v-if="info.sportStatus" v-model="info.sportStatus" label="International Federation Testing Pool">International Federation Testing Pool</el-radio>
                  <el-radio v-else label="International Federation Testing Pool" value="International Federation Testing Pool">International Federation Testing Pool</el-radio>
                  <el-radio v-model="info.sportStatus" label="Hong Kong Eite Testing Pool">Hong Kong Eite Testing Pool</el-radio>
                  <el-radio v-model="info.sportStatus" label="Hong Kong Registered Testing Pool">Hong Kong Registered Testing Pool</el-radio>
                </template>
                <template v-else>
                  <input v-if="info.sportStatus==='Others'" v-model="info.bodyDesc.sportStatusOthers" :readonly="inputReadonly">
                  <input v-else v-model="info.sportStatus" :readonly="inputReadonly">
                </template>
              </div>
            </el-col>
            <el-col :sm="24" :md="24" :lg="10" :xl="10">
              <template v-if="!inputReadonly">
                <div class="ul-input"><label class="label-md hide">Sports Status: </label>
                  <el-radio v-model="info.sportStatus" label="Others" style="width: 100px;flex: inherit;">Others</el-radio>
                  <input v-model="info.bodyDesc.sportStatusOthers" :readonly="info.sportStatus !== 'Others' || inputReadonly">
                </div>
              </template>
            </el-col>
            <el-col :sm="24" :md="24" :lg="14" :xl="14" :offset="14" />
            <el-col :sm="24" :md="16" :lg="10" :xl="10">
              <div class="ul-input"><label class="label-md">Date: </label>
                <el-date-picker v-model="info.startDate" type="date" placeholder="Date Picker" format="dd-MM-yyyy" value-format="yyyy-MM-dd" :readonly="inputReadonly" style="width: 100%;margin-right: 10px;" />
                <span style="margin-right: 10px">-</span>
                <el-date-picker v-model="info.endDate" type="date" placeholder="Date Picker" format="dd-MM-yyyy" value-format="yyyy-MM-dd" :readonly="inputReadonly" style="width: 100%;" />
              </div>
            </el-col>
            <el-col v-if="activeName == 'mn1'" :span="24">
              <div class="ul-input" style="justify-content: flex-start;align-items: baseline;"><label class="label-md">File upload: </label>
                <template>
                  <el-upload
                    class=""
                    :action="APP_BASE_API + '/manager/file/upload'"
                    :headers="myHeaders"
                    :on-change="handleChange2"
                    :on-preview="handlePreview"
                    :on-remove="handleChange2"
                    :before-upload="beforeAvatarUpload"
                    :file-list="info.whereaFileUp"
                  >
                    <div v-if="!inputReadonly" slot="tip" class="el-upload__tip">The max. size of each file is 10MB</div>
                    <button v-if="!inputReadonly" type="button" class="no-print el-button el-button--success"><span>Add</span></button>
                  </el-upload>
                </template>
              </div>
            </el-col>
          </el-row>
          <!-- Medication Medication -->
          <el-row v-if="activeName == 'mn2'" :gutter="20" class="solid-row">
            <el-col :sm="10" :md="8" :lg="10" :xl="8">
              <div class="ul-input"><label>Medication: </label>
                <input v-model="info.medication" :readonly="inputReadonly">
              </div>
            </el-col>
            <el-col :sm="10" :md="8" :lg="10" :xl="8">
              <div class="ul-input"><label>Duration: </label>
                <el-select v-model="info.duration" :placeholder="inputReadonly ? '':'Select'" :disabled="inputReadonly">
                  <template v-for="item in durations">
                    <el-option v-if="item.value === info.duration || item.isDelete !==1" :key="item.value" :label="item.label" :value="item.value"/>
                  </template>
                </el-select>
<!--                <template v-else>-->
<!--                  <input v-for="item in durations" v-if="item.value === info.duration" v-model="item.label" :readonly="inputReadonly">-->
<!--                </template>-->
              </div>
            </el-col>
            <el-col :sm="24" :md="10" :lg="10" :xl="10">
              <div class="ul-input"><label class="label-md">Period: </label>
                <el-date-picker
                  v-model="info.startDate"
                  type="date"
                  format="dd-MM-yyyy"
                  value-format="yyyy-MM-dd"
                  :placeholder="inputReadonly?'':'Date Picker'"
                  style="width: 100%;margin-right: 10px;"
                  :readonly="inputReadonly"
                />
                <span style="margin-right: 10px">-</span>
                <el-date-picker v-model="info.endDate" type="date" :placeholder="inputReadonly?'':'Date Picker'" format="dd-MM-yyyy" value-format="yyyy-MM-dd" style="width: 100%;" :readonly="inputReadonly" />
              </div>
            </el-col>
            <el-col :sm="24" :md="10" :lg="10" :xl="8">
              <div class="ul-input"><label class="label-lg">HK Registration No.: </label><input v-model="info.hkRegistration" :readonly="inputReadonly"></div>
            </el-col>
            <el-col :span="24" :md="24" :lg="24" :xl="15">
              <div class="ul-input">
                <label class="label-lg">In Competition: </label>
                <template v-if="info.modify">
                  <el-radio v-model="info.inCompetition" label="Not Prohibited">Not Prohibited</el-radio>
                  <el-radio v-model="info.inCompetition" label="Prohibited">Prohibited</el-radio>
                  <el-radio v-model="info.inCompetition" label="Route Dependent">Route Dependent</el-radio>
                  <el-radio v-model="info.inCompetition" label="Sports Dependent">Sports Dependent</el-radio>
                </template>
                <input v-else v-model="info.inCompetition" :readonly="inputReadonly">
              </div>
            </el-col>
            <el-col v-if="info.modify" :sm="15" :md="15" :lg="10" :xl="10">
              <div class="ul-input"><label class="label-lg hide">In Competition: </label>
                <el-radio v-model="info.inCompetition" label="Others" style="width: 100px;flex: inherit;">Others</el-radio>
                <input v-model="info.bodyDesc.inCompetitionOthers" :readonly="info.inCompetition !== 'Others' || inputReadonly">
              </div>
            </el-col>
            <el-col :span="24" :md="24" :lg="24" :xl="15">
              <div class="ul-input"><label class="label-lg">Out Competition: </label>
                <template v-if="info.modify">
                  <el-radio v-model="info.outCompetition" label="Not Prohibited">Not Prohibited</el-radio>
                  <el-radio v-model="info.outCompetition" label="Prohibited">Prohibited</el-radio>
                  <el-radio v-model="info.outCompetition" label="Route Dependent">Route Dependent</el-radio>
                  <el-radio v-model="info.outCompetition" label="Sports Dependent">Sports Dependent</el-radio>
                </template>
                <input v-else v-model="info.outCompetition" :readonly="inputReadonly">
              </div>
            </el-col>
            <el-col v-if="info.modify" :sm="15" :md="15" :lg="10" :xl="10">
              <div class="ul-input"><label class="label-lg hide">Out Competition: </label>
                <el-radio v-model="info.outCompetition" label="Others" style="width: 100px;flex: inherit;">Others</el-radio>
                <input v-model="info.bodyDesc.outCompetitionOthers" :readonly="info.outCompetition !== 'Others' || inputReadonly">
              </div>
            </el-col>
            <el-col :span="14" class="hide" :sm="1" :md="1" :lg="1" :xl="1">
              <div class="ul-input"></div>
            </el-col>
            <el-col v-if="activeName == 'mn1'" :span="24">
              <div class="ul-input" style="justify-content: flex-start;align-items: baseline;"><label class="label-md">File upload: </label>
                <el-upload
                  class=""
                  :action="APP_BASE_API + '/manager/file/upload'"
                  :headers="myHeaders"
                  :on-change="handleChange"
                  :on-preview="handlePreview"
                  :on-remove="handleChange"
                  :before-upload="beforeAvatarUpload"
                  :file-list="info.fileUp"
                >
                  <div v-if="info.modify" slot="tip" class="el-upload__tip">The max. size of each file is 10MB</div>
                  <button  v-if="info.modify" type="button" class="no-print el-button el-button--success"><span>Add</span></button>
                </el-upload>
              </div>
            </el-col>
          </el-row>
          <!-- Medication TUE -->
          <el-row v-if="activeName == 'mn3'" :gutter="20" class="solid-row">
            <!--            <h3 style="margin-top: 0">Classification</h3>-->
            <el-col :sm="10" :md="8" :lg="7" :xl="7">
              <div class="ul-input"><label>Prohibited Substance: </label>
                <input v-model="info.classSports" :readonly="inputReadonly">
<!--                <el-select v-model="info.classSports" :placeholder="inputReadonly ? '':'Select'" :disabled="inputReadonly">-->
<!--                  <template v-for="item in sports">-->
<!--                    <el-option v-if="info.classSports === item.id || item.isDelete !== 1" :key="item.value" :label="item.typeName" :value="item.id" />-->
<!--                  </template>-->
<!--                </el-select>-->
                <!--                <template v-else>-->
                <!--                  <input v-for="item in sports" v-if="item.id === info.classSports" v-model="item.typeName" :readonly="inputReadonly">-->
                <!--                </template>-->
              </div>
              <div class="ul-input"><label>Frequency: </label><input v-model="info.frequency" :readonly="inputReadonly"></div>
              <div class="ul-input"><label class="label-lg">Effective Day: </label>
                <el-date-picker v-model="info.startDate" type="date" placeholder="Date Picker" format="dd-MM-yyyy" value-format="yyyy-MM-dd" style="width: 100%;" />
              </div>
              <div class="ul-input"><label>Remarks: </label><input v-model="info.remarks" :readonly="inputReadonly"></div>
            </el-col>
            <el-col :sm="10" :md="8" :lg="7" :xl="7">
              <div class="ul-input">
                <label>Dosage: </label><input v-model="info.dosage" :readonly="inputReadonly">
                <!--                <input v-model="info.dosage" placeholder="Long/Short Term">-->
                <!--                <el-select v-model="mn2.value2" placeholder="Long/Short Term">-->
                <!--                  <el-option v-for="item in mn2.options2" :key="item.value" :label="item.label" :value="item.value" />-->
                <!--                </el-select>-->
              </div>
              <div class="ul-input"><label>Route: </label><input v-model="info.route" :readonly="inputReadonly"></div>
              <div class="ul-input"><label>Expiration: </label>
                <el-date-picker v-model="info.endDate" type="date" placeholder="Date Picker" format="dd-MM-yyyy" value-format="yyyy-MM-dd" style="width: 100%;" />
              </div>
            </el-col>
          </el-row>

          <el-row v-if="activeName == 'mn1'" :gutter="20" class="solid-row">
            <h3 style="margin-top: 0;">Doping Test Record</h3>
            <el-col :sm="18" :md="15" :lg="8" :xl="6">
              <div class="ul-input"><label class="label-md">Type of Test: </label>
                <el-select v-model="info.typeTest" :placeholder="inputReadonly ? '':'Select'" :disabled="inputReadonly">
                  <template v-for="item in typesDoping">
                    <el-option v-if="info.typeTest === item.id || item.isDelete !== 1" :key="item.value" :label="item.typeName" :value="item.id" />
                  </template>
                </el-select>
<!--                <template v-else>-->
<!--                  <input v-for="item in typesDoping" v-if="item.id === info.typeTest" v-model="item.typeName" :readonly="inputReadonly">-->
<!--                </template>-->
              </div>
            </el-col>
            <el-col :span="24">

              <div class="ul-input" style="justify-content: flex-start;align-items: baseline;"><label class="label-md">File upload: </label>
                <el-upload
                  class=""
                  :action="APP_BASE_API + '/manager/file/upload'"
                  :headers="myHeaders"
                  :on-change="handleChange"
                  :on-preview="handlePreview"
                  :on-remove="handleChange"
                  :before-upload="beforeAvatarUpload"
                  :file-list="info.fileUp"
                >
                  <div v-if="info.modify" slot="tip" class="el-upload__tip">The max. size of each file is 10MB</div>
                  <button v-if="info.modify" type="button" class="no-print el-button el-button--success"><span>Add</span></button>
                </el-upload>
              </div>
            </el-col>
          </el-row>
          <!--          <el-row :gutter="20" class="solid-row">-->
          <!--            <el-col :span="4" style="width: 150px;flex: inherit;line-height: 40px;padding-right: 0;">-->
          <!--              <div class="ul-input"><label>Grant Access: </label></div>-->
          <!--            </el-col>-->
          <!--            <el-col :sm="6" :md="6" :lg="4" :xl="4" style="position: relative;">-->
          <!--              <img src="../../assets/images/del2.svg" class="btn-icon-del">-->
          <!--              <div class="ul-input"><input v-model="info.grantAccess" value="Text"></div>-->
          <!--            </el-col>-->
          <!--            <el-col :sm="8" :md="7" :lg="7" :xl="7">-->
          <!--              <div class="ul-input"><input value="Text">-->
          <!--                <button type="button" class="el-button el-button&#45;&#45;success"><span>Add</span></button>-->
          <!--              </div>-->
          <!--            </el-col>-->
          <!--            <el-col :span="24">-->
          <!--              <div class="ul-input"><label class="label-md">Short Report: </label><input v-model="info.shortReport" value="Text"></div>-->
          <!--            </el-col>-->
          <!--          </el-row>-->
        </div>
        <div v-if="followUpBox">
          <h3>Reminder</h3>
          <el-row :gutter="20" class="solid-row">
            <el-col v-if="!inputReadonly" :sm="10" :md="8" :lg="7" :xl="5">
              <div class="ul-input"><label style="width: 120px;flex: inherit;">Review Session: </label>
                <el-date-picker v-model="info.reviewSession" type="date" placeholder="Date Picker" format="dd-MM-yyyy" value-format="yyyy-MM-dd" style="width:100%;" :readonly="inputReadonly" />
              </div>
            </el-col>
            <el-col v-else :sm="24" :md="24" :lg="24" :xl="24">
              <div class="ul-input" style="justify-content:flex-start;"><label style="width: 120px;flex: inherit;">Review Session: </label>
                <div style="display: inline-block;position: relative;margin-right: 20px">
                  <el-date-picker v-model="info.reviewSession" type="date" placeholder="Date Picker" format="dd-MM-yyyy" value-format="yyyy-MM-dd" style="width:100%;" :readonly="inputReadonly" />
                </div>
                <div v-for="item in followUpData.list" :key="item.key" style="display: inline-block;position: relative;margin-right: 20px">
                  <div class="ul-input"><input :value="item.name" readonly></div>
                </div>
              </div>
            </el-col>
            <el-col v-if="info.modify" :sm="8" :md="6" :lg="4" :xl="3">
              <div class="ul-input">
                <el-autocomplete
                  v-model="followUpData.name"
                  :fetch-suggestions="querySearchAsync"
                  :clearable="true"
                  placeholder="User name"
                  @select="handleSelect"
                />
              </div>
            </el-col>
            <el-col v-if="info.modify" :sm="6" :md="10" :lg="12" :xl="12">
              <button type="button" class="no-print el-button el-button--success" @click="addFollowUp(followUpData.name, followUpData.id)"><span>Add</span></button>
            </el-col>
            <el-col v-if="info.modify" :sm="24" :md="24" :lg="24" :xl="24">
              <div class="ul-input" style="display: inline-block;position: relative;margin-right: 20px;">
                <el-select v-model="info.followUp.groupIds" multiple placeholder="User group select" style="width:300px;max-width: 100% ">
                  <el-option v-for="item in USER_GROUP" :key="item.typeName" :label="item.typeName" :value="item.id" />
                </el-select>
              </div>
              <div v-for="(item, i) in followUpData.list" :key="item.key" style="display: inline-block;position: relative;margin-right: 20px">
                <img v-if="info.modify" src="../../assets/images/del2.svg" class="btn-icon-del" alt="delete" @click="delFollowUp(i)">
                <div class="ul-input"><input :value="item.name" readonly></div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div v-if="fileUploadBox">
          <h3> {{ pageType == 'Classification' ? 'Classification' : 'File upload' }}</h3>
          <div class="solid-row" style="margin-left: -10px;margin-right: -10px;">
            <div v-if="info.modify" class="el-upload__tip" style="margin-bottom: 10px;">The max. size of each file is 10MB</div>
            <el-upload
              :action="APP_BASE_API + '/manager/file/upload'"
              :headers="myHeaders"
              :on-change="handleChange"
              :on-preview="handlePreview"
              :on-remove="handleChange"
              :before-upload="beforeAvatarUpload"
              :file-list="info.fileUp"
            >
              <button v-if="info.modify" type="button" class="no-print el-button el-button--success"><span>Add</span></button>
            </el-upload>
          </div>
        </div>
        <template v-if="remarksBox">
          <el-row :gutter="20" class="solid-row">
            <el-col :sm="24" :md="24" :lg="24" :xl="24">
              <div class="ul-input ul-textarea"><label class="label-sm">Remarks: </label>
                <textarea v-if="activeName === 'tab1' || activeName === 'tab2' || (activeName === 'tab3' && pageType === 'SportScience')" v-model="info.remarks" :readonly="inputReadonly" />
                <textarea v-else v-model="info.remarkInfo" :readonly="inputReadonly" />
              </div>
            </el-col>
          </el-row>
        </template>
        <!--        <div v-if="reviewSessionBox">-->
        <!--          <el-row :gutter="20" class="solid-row">-->
        <!--            <el-col :span="4" style="width: 150px;flex: inherit;line-height: 40px;padding-right: 0;">-->
        <!--              <div class="ul-input"><label>Review Session: </label></div>-->
        <!--            </el-col>-->
        <!--            <el-col :sm="6" :md="6" :lg="4" :xl="4" style="position: relative;">-->
        <!--              <img src="../../assets/images/del2.svg" class="btn-icon-del">-->
        <!--              <div class="ul-input"><input value="Text"></div>-->
        <!--            </el-col>-->
        <!--            <el-col :sm="8" :md="7" :lg="7" :xl="7">-->
        <!--              <div class="ul-input"><input value="Text">-->
        <!--                <button type="button" class="el-button el-button&#45;&#45;success"><span>Add</span></button>-->
        <!--              </div>-->
        <!--            </el-col>-->
        <!--            <el-col :span="24">-->
        <!--              <div class="ul-input"><label class="label-md">Short Report: </label><input value="Text"></div>-->
        <!--            </el-col>-->
        <!--          </el-row>-->
        <!--        </div>-->
        <el-row v-if="userType === 'ADMIN'" :gutter="20" class="solid-row">
          <template v-if="grantAccessBox">
            <el-col v-if="info.modify" :span="4" style="width: 150px;flex: inherit;line-height: 40px;padding-right: 0;">
              <div class="ul-input">
                <label>Grant Access: </label>
              </div>
            </el-col>
            <el-col v-if="info.modify && grantAccessBox" :sm="8" :md="8" :lg="7" :xl="5">
              <div class="ul-input">
                <el-autocomplete
                  v-model="grantAccessData.name"
                  :fetch-suggestions="querySearchAsync"
                  :clearable="true"
                  placeholder="User name"
                  @select="grantAccesshandleSelect"
                />
                <button type="button" class="no-print el-button el-button--success" @click="addFollowUp(grantAccessData.name, grantAccessData.id, 'GrantAccess')"><span>Add</span></button>
              </div>
            </el-col>
            <el-col v-if="grantAccessBox" :sm="24" :md="24" :lg="24" :xl="24">
              <div v-if="info.modify" class="ul-input" style="display: inline-block;position: relative;margin-right: 20px;">
                <el-select v-model="info.grantAccess.groupIds" multiple placeholder="User Group Select" style="width:300px;max-width: 100% ">
                  <el-option v-for="item in USER_GROUP" :key="item.typeName" :label="item.typeName" :value="item.id" />
                </el-select>
              </div>
              <!--              <div v-if="info.modify" style="display: inline-block;position: relative;margin-right: 20px">-->
              <!--                <label>Grant Access: </label>-->
              <!--              </div>-->
              <div v-for="(item, i) in grantAccessData.list" :key="item.key" style="display: inline-block;position: relative;margin-right: 20px">
                <img v-if="info.modify" src="../../assets/images/del2.svg" class="btn-icon-del" @click="delFollowUp(i, 'GrantAccess')">
                <div class="ul-input"><input :value="item.name" readonly></div>
              </div>
            </el-col>
          </template>
          <el-col v-if="shortReportBox" :span="24">
            <div class="ul-input"><label class="label-md">Short Report: </label><input v-model="info.shortReport" :readonly="inputReadonly"></div>
          </el-col>
        </el-row>
        <!-- <template v-if="ENV === 'development'">
          <div v-for="(item, i) in info">
            <p><b>{{i}}</b>: {{JSON.stringify(item)}}</p>
          </div>
        </template> -->
        <el-form-item class="no-print" style="margin: 0;text-align: center;">
         <!-- <el-button v-if="target != 'blank'" type="success" size="medium" @click="onBack">Back</el-button> -->
          <el-button v-if="info.status !='PUBLISH' && query.id && userType.indexOf('ADMIN')>-1 && (pageType === 'SportMedicine' || pageType === 'SportScience' || (pageType === 'Medication' && activeName === 'mn2'))" type="success" size="medium" @click="onSubmit('info', 'publish')">Publish</el-button>
          <el-button v-if="query.id && userType.indexOf('ADMIN')>-1" v-print='printObj' @click='printDom' type="success" size="medium">Print</el-button>
          <el-button v-if="info.modify && query.id" type="success" size="medium" @click="onSubmit('info', 'save')">Save</el-button>
          <el-button  v-if="!query.id" type="success" size="medium" @click="onSubmit('info', 'add')">Add</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
    import draw from './draw'
    import { getToken } from '@/utils/auth'
    import store from '@/store'
    // eslint-disable-next-line no-unused-vars
    import { addPersonnel, modifyPersonnel, getBelongingTypes, getUserList, queryAthletesList, queryUserList } from '@/api/setting'
    import { addMedical, getMedicalInfo, modifyMedical, placeMedical } from '@/api/medical'
    import { getGeneralInfoList } from '@/api/athletes'
    const reviewSessionA = ['Competition', 'Training', 'Recreation', 'Others']
    const typeInjury = ['Competition', 'Training', 'Recreation', 'Report Date']
    const reviewSessionB = ['Skull', 'Soapl', 'Eye', 'Ear', 'Mouth', 'Tooth', 'Nose', 'Face']
    const neckTrunk = ['Neck', 'Back', 'Chest', 'Adbomen', 'Pelvic', 'Groin']
    const upperLimbsA = ['Shoulder', 'Upper arm', 'Elbow', 'Foream', 'Wrist', 'Hand', 'Palm', 'Finger']
    const upperLimbsB = ['Buttock', 'Hip', 'Thigh', 'Knee', 'Leg', 'Ankle', 'Foot', 'Toe']
    const natureInjury = [{ checkedCities: [], list: ['Abrasion', 'Bruise', 'Concussion', 'Mouth ', 'Dislocation'] },
        { checkedCities: [], list: ['Facet Joint Dysfunction', 'Fracture', 'Haematome', 'Lesion of meniscus/disc/cartilage'] },
            { checkedCities: [], list: ['Ligamentour Sprain', 'Ligamental Tear', 'Muscle Cramp', 'Muscle Strain '] },
          { checkedCities: [], list: ['Nerve Problems', 'Radiculopathy', 'Subluxation', 'Tendon Rupture/tendonitis'] },
          { checkedCities: [], list: ['Other Bone Injury', 'Other Soft Tissue Injury', 'Joint Sprain'] }]
    const nowDate = new Date()
    const competitionArray = ['Not Prohibited', 'Prohibited', 'Route Dependent', 'Sports Dependent']

    export default {
      name: 'medicalNewCase',
        components: {
            draw
        },
        props: {
       query:{
         type:Object,
         value:{
         page:'SportMedical',
         id:0,
         type:'PHYSIOTHERAPY'
        }
       }
        },
        data() {
            return {
                APP_BASE_API: process.env.VUE_APP_BASE_API,
                ENV: process.env.VUE_APP_ENV,
                imgs: [],
                printObj:{
                  id: "print",
                  popTitle: 'HKPC-'+this.pageType+'-'+this.query.id,
                  extraCss: 'https://wsstest.teamotto.me/hkpc/#/,https://wsstest.teamotto.me/hkpc/#/medical?tab=SportMedicine',
                  standard:'pdf',
                  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
                  endCallback:(e)=>{
                    console.log('123123',e)
                    debugger
                  }
                },
                activeName: 'tab1',
                pageType: 'SportMedical',
                myHeaders: { Authorization: getToken() },
                fileList: [],
                reviewSessionA: reviewSessionA, typeInjury: typeInjury, reviewSessionB: reviewSessionB, neckTrunk: neckTrunk, upperLimbsA: upperLimbsA, upperLimbsB: upperLimbsB,
                inputReadonly: false,
                info: {
                    creatorLastName: '',
                    creatorFirstName: '',
                    category: '',
                    sports: '',
                    selectDate: `${nowDate.getFullYear()}-${nowDate.getMonth() + 1}-${nowDate.getDate()}`,
                    startDate: '', // `${nowDate.getFullYear()}-${nowDate.getMonth() + 1}-${nowDate.getDate()}`
                    endDate: '', // `${nowDate.getFullYear()}-${nowDate.getMonth() + 1}-${nowDate.getDate() + 1}`
                    memberId: '',
                    fileUp: [],
                    whereaFileUp: [],
                    venue: '',
                    pic: '',
                    organizer: '',
                    type: 'GENERAL_PRACTITIONER',
                    followUp: {
                        userIds: [],
                        groupIds: []
                    },
                    grantAccess: {
                        userIds: [],
                        groupIds: []
                    },
                    userGroup: [],
                    reviewSession: '', // `${nowDate.getFullYear()}-${nowDate.getMonth() + 1}-${nowDate.getDate()}`
                    shortReport: '',
                    remarks: '',
                    remarkInfo: '',
                    bodyDesc: {
                        diagnosis_progress: '',
                        findings: '',
                        physiotherapy: {
                            reviewSession: [],
                            typeInjury: [],
                            causeInjury: [],
                            reviewSessionB: [],
                            neckTrunk: [],
                            upperLimbsA: [],
                            upperLimbsB: [],
                            diagnosisImg: '',
                            natureInjury: natureInjury,
                            natureInjuryOthers: '',
                            typeOfInJuryDate: '',
                            causeOfInjuryDate: '',
                            reviewOthers: '',
                            DiagnosisOthers: ''
                        },
                        diagnosis: '',
                        weight: '',
                        height: '',
                        athlete: '',
                        progress_recommendation: '',
                        recommendation: {
                            breakfast: '',
                            supper: '',
                            elevenses: '',
                            dinner: '',
                            lunch: '',
                            tea: '',
                            others: ''
                        },
                        sportStatusOthers: '',
                        inCompetitionOthers: '',
                        outCompetitionOthers: ''
                    },
                    sportsStatus: 'New',
                    sportStatus: '',
                    sportsClasses: '',
                    datePicker: '',
                    place: '',
                    clasifedBy: '',
                    clasifeEvent: '',
                    typeTest: '',
                    medication: '',
                    duration: '',
                    hkRegistration: '',
                    inCompetition: 'Not Prohibited',
                    classSports: '',
                    dosage: '',
                    frequency: '',
                    route: '',
                    outCompetition: 'Not Prohibited',
                    categoryType: '',
                    uts: '',
                    modify: 1
                },
                rules: {
                    // member: [
                    //     { required: true, message: 'Please input', trigger: 'blur' }
                    // ]
                },
                restaurants: [],
                athleteData: {
                    name: '', id: '', list: []
                },
                followUpData: {
                    name: '', id: '', list: []
                },
                grantAccessData: {
                    name: '', id: '', list: []
                },
                timeout: null,
                options1: [{
                    value: 'type1',
                    label: 'type1'
                }],
                durations: [{
                    value: 'Short Term',
                    label: 'Short Term'
                }, {
                    value: 'Long Term',
                    label: 'Long Term'
                }],
                sports: [],
                USER_GROUP: [],
                categorys: [],
                typesVenue: [],
                typesDoping: [],
                typesMedicalRecord: [],
                typesData: {},
                useTypeIdsData: {},
                fileUploadBox: true,
                // reviewSessionBox: true,
                followUpBox: true,
                grantAccessBox: true,
                remarksBox: false,
                shortReportBox: true,
                userType: store.getters.userType,
                mn2: {
                    durations: [{
                        value: 'Name',
                        label: 'Name1'
                    }],
                    value1: '',
                    options2: [{
                        value: 'Name',
                        label: 'Long'
                    }, {
                        value: 'Name1',
                        label: 'Short Term'
                    }],
                    value2: ''
                }
            }
        },
        watch: {
          query(val,old){
                this.initProps()
            },
            // pageType(){

            // },
          $route: {
                handler: function(route) {
                    this.target = route.query && route.query.target
                },
                immediate: true
            }
        },
        // watch: {
        //     activeName(val) {
        //         this.$router.push(`${this.$route.path}?tab=${val}`)
        //     }
        // },
        created() {

        },
        mounted() {
          this.initProps()

        },
        methods: {
          printDom(){
            // for(var i in document.getElementsByClassName('no-print')){
            //   document.getElementsByClassName('no-print')[i].style? document.getElementsByClassName('no-print')[i].style.display='none':''
            // }
            //document.getElementsByClassName('no-print').style.css
           // this.$print(document.getElementById('print'))
          // let print= new this.$print.bind(this.$refs.print,{'no-print':'.no-print'})
          // this.$print(this.$refs.print,{'no-print':'.no-print'});
          },
          initProps(){
            const {query} = this//.$route.query
          this.printObj.popTitle='HKPC-'+this.pageType+'-'+query.id
            if (query.page === 'SportMedicine') {
                this.pageType = 'SportMedicine'
                this.activeName = 'sm1'
                this.remarksBox = true
            } else if (query.page === 'Medication') {
                this.pageType = 'Medication'
                this.activeName = 'mn1'
                this.fileUploadBox = false
                this.followUpBox = false
                this.remarksBox = true
            } else if (query.page === 'SportScience') {
                this.pageType = 'SportScience'
                this.remarksBox = true
            } else if (query.page === 'Classification') {
                this.pageType = 'Classification'
                this.activeName = 'cc1'
                this.followUpBox = false
                this.remarksBox = true
                this.shortReportBox = false
            }
            if (query.tab) {
                this.activeName = query.tab
            }
            this.target = query && query.target

            if (this.userType.indexOf('ADMIN')<=-1) {
                this.grantAccessBox = false
            }

            // if ((this.userType !== 'ADMIN' && this.userType !== 'DOCTOR')) {
            //     this.inputReadonly = true
            //     this.info.status = 'PUBLISH'
            // }

            if (query.id) {
                this.openLoading(true)
                if (query.type === 'GENERAL_PRACTITIONER') this.activeName = 'sm1'
                if (query.type === 'ORTHOPEDICE') this.activeName = 'sm2'
                if (query.type === 'PROSTHETICS_ORTHOTICS') this.activeName = 'sm3'
                if (query.type === 'PHYSIOTHERAPY') this.activeName = 'sm4'
                if (query.type === 'OPHTHALMOLOGY') this.activeName = 'sm5'
                if (query.type === 'OTHERS') this.activeName = 'tab3'
                if (query.type === 'NUTRITION') this.activeName = 'tab1'
                if (query.type === 'PSYCHOLOGY') this.activeName = 'tab2'
                if (query.type === 'DOPING') this.activeName = 'mn1'
                if (query.type === 'MEDICATION') this.activeName = 'mn2'
                if (query.type === 'TUE') this.activeName = 'mn3'
                this.getinfo(this.pageType, query.id)
            }
            getBelongingTypes({ belonging: 'MISCELLANEOUS' }).then(response => {
                const data = response.result
                this.sports = data.SPORTS_TYPE
                this.USER_GROUP = data.USER_GROUP
                Object.assign(this.typesData, data)
            })

            getBelongingTypes({ belonging: 'MEDICAL' }).then(response => {
                const data = response.result
                if (query.page === 'SportMedicine') {
                    this.categorys = data.CATEGORY
                } else {
                    this.categorys = data.SCIENCE_CATEGORY
                }
                this.typesDoping = data.DOPING
                this.typesMedicalRecord = data.REDICAL_RECORD
                Object.assign(this.typesData, data)
            })
            getBelongingTypes({ belonging: 'TRAINING' }).then(response => {
                const data = response.result
                this.typesVenue = data.VENUE
                Object.assign(this.typesData, data)
                // console.log(this.typesData)
            })
          },
            fetchData() {
                const query = this
                if (query.page === 'Medication') {
                  if (this.activeName === 'mn2' || this.info.type === 'MEDICATION') {
                      this.fileUploadBox = true
                      this.followUpBox = true
                  } else {
                     this.fileUploadBox = false
                     this.followUpBox = false
                  }
                }
            },
            headerChild() {

            },

            openLoading(type, text) {
                // const loading = this.$loading()
                // if (type) {
                //     this.$loading({
                //         lock: true,
                //         text: text || 'Loading',
                //         spinner: 'el-icon-loading',
                //         background: 'rgba(0, 0, 0, 0)'
                //     })
                //     setTimeout(function() {
                //         loading.close()
                //     }, 10000)
                // } else {
                //     setTimeout(() => {
                //         loading.close()
                //     }, 500)
                // }
            },
            changeValue(val, typeCode) {
                const types = this.typesData[`${typeCode}`]
                for (var i in types) {
                    if (val === types[i].typeName) {
                        return types[i].id ? types[i].id : ''
                    }
                }
            },
            querySearchAsync(queryString, cb) {
                if (queryString === '') {
                    cb([])
                    return false
                }
                queryUserList({ name: queryString }).then(response => {
                    // var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
                    var results = []; var data = response.result
                    for (var i in data) {
                        results.push({
                            value: data[i].lastName + ' ' + data[i].firstName,
                            name: data[i].lastName + ' ' + data[i].firstName,
                            id: data[i].userId
                        })
                    }
                    clearTimeout(this.timeout)
                    this.timeout = setTimeout(() => {
                        cb(results)
                    }, 200 * Math.random())
                })
            },
            queryAthleteSearchAsync(queryString, cb) {
                if (queryString === '') {
                    cb([])
                    return false
                }
                queryAthletesList({ name: queryString }).then(response => {
                    // var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
                    var results = []; var data = response.result
                    for (var i in data) {
                        results.push({
                            value: data[i].lastName + ' ' + data[i].firstName + ' ' + data[i].hkId.substr(0, 4),
                            name: data[i].lastName + ' ' + data[i].firstName,
                            id: data[i].userId
                        })
                    }
                    clearTimeout(this.timeout)
                    this.timeout = setTimeout(() => {
                        cb(results)
                    }, 200 * Math.random())
                })
            },
            createStateFilter(queryString) {
                return (state) => {
                    return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
                }
            },
            handleSelect(item) {
                this.followUpData.name = item.name
                this.followUpData.id = item.id
                // console.log(item)
            },
            grantAccesshandleSelect(item) {
                this.grantAccessData.name = item.name
                this.grantAccessData.id = item.id
            },
            athleteshandleSelect(item) {
                this.athleteData.name = item.name
                this.athleteData.id = item.id
                this.info.memberId = item.id
            },
            athleteshandleBlur(item) {
                // const that = this
                // setTimeout(function() {
                //   getGeneralInfoList({ athleteId: that.info.memberId }).then(response => {
                //       const data = response.result
                //       const name = data.general.lastName + ' ' + data.general.firstName
                //       if (name !== that.athleteData.name) {
                //           that.athleteData.name = name
                //       }
                //   })
                // }, 1000)
            },
            addFollowUp(name, id, type) {
                if (!name && !id) {
                    this.$message({
                        type: 'error',
                        message: 'Please select users'
                    })
                    return false
                }
                if (name && id) {
                  if (type === 'GrantAccess') {
                      const list = this.grantAccessData.list
                      for (var i in list) {
                        if (list[i].id === id) {
                          this.followUpData.name = ''
                          this.followUpData.id = ''
                          return false
                        }
                      }
                      list.push({ name: name, id: id })
                      this.grantAccessData.name = ''
                      this.grantAccessData.id = ''
                  } else {
                      const list = this.followUpData.list
                      for (var i in list) {
                       if (list[i].id === id) {
                         this.followUpData.name = ''
                         this.followUpData.id = ''
                         return false
                       }
                      }
                      list.push({ name: name, id: id })
                      this.followUpData.name = ''
                      this.followUpData.id = ''
                  }
                }
            },
            delFollowUp(key, type) {
                if (type === 'GrantAccess') {
                    const list = this.grantAccessData.list
                    list.splice(key, 1)
                } else {
                    const list = this.followUpData.list
                    list.splice(key, 1)
                }
            },
            onSubmit: function(formName, operation) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const params = {}
                        const info = this.info
                        const useTypeIds = []

                        if (this.pageType === 'Classification') {
                          if (info.sportsStatus !== 'Review + F xDate') {
                            info.datePicker = ''
                          }
                          delete info.bodyDesc
                        } else {
                          if (this.activeName === 'sm4') {
                            info.bodyDesc.physiotherapy.diagnosisImg = JSON.stringify(this.$refs.mychild.getImage())
                          } else {
                            info.bodyDesc.physiotherapy.diagnosisImg = JSON.stringify('')
                          }
                        }

                        if (this.activeName === 'sm4') {
                          if (info.bodyDesc.physiotherapy.typeOfInJuryDate === null) info.bodyDesc.physiotherapy.typeOfInJuryDate = ''
                          if (info.bodyDesc.physiotherapy.causeOfInjuryDate === null) info.bodyDesc.physiotherapy.causeOfInjuryDate = ''
                        }

                        Object.assign(params, this.info, { fileUp: info.fileUp.length < 1 ? JSON.stringify([]) : JSON.stringify(this.$uploadFormat(info.fileUp)) }, { whereaFileUp: info.whereaFileUp.length < 1 ? JSON.stringify([]) : JSON.stringify(this.$uploadFormat(info.whereaFileUp)) }, { bodyDesc: JSON.stringify(info.bodyDesc) })
                        if (params.sports) useTypeIds.push(this.changeValue(params.sports, 'SPORTS_TYPE'))
                        if (params.venue) useTypeIds.push(this.changeValue(params.venue, 'VENUE'))
                        if (params.category) useTypeIds.push(this.changeValue(params.category, 'CATEGORY'))
                        if (params.typeTest) useTypeIds.push(this.changeValue(params.typeTest, 'DOPING'))
                        if (params.medication) useTypeIds.push(this.changeValue(params.medication, 'REDICAL_RECORD'))
                        // if (params.inCompetition === 'Others') params.inCompetition = params.inCompetitionTxt
                        // if (params.outCompetition === 'Others') params.outCompetition = params.outCompetitionTxt
                        params.useTypeIds = useTypeIds.join(',')
                        if (this.followUpData.list.length > 0) {
                            params.followUp.userIds = []
                            console.log(params.followUp.userIds)
                            const followUpList = this.followUpData.list
                            for (var i in followUpList) {
                                params.followUp.userIds.push(followUpList[i].id)
                            }
                        } else {
                            params.grantAccess.userIds = []
                        }
                        if (this.grantAccessData.list.length > 0) {
                            const grantAccessList = this.grantAccessData.list
                            params.grantAccess.userIds = []
                            for (var ii in grantAccessList) {
                                params.grantAccess.userIds.push(grantAccessList[ii].id)
                            }
                        } else {
                            params.grantAccess.userIds = []
                        }

                        if (params.reviewSession === null) params.reviewSession = ''
                        if (params.startDate === null) params.startDate = ''
                        if (params.endDate === null) params.endDate = ''
                        if (params.datePicker === null) params.datePicker = ''

                        // if (this.activeName === 'mn2' && params.inCompetition === 'Others') {
                        //     params.inCompetition = params.inCompetitionOthers
                        // }
                        //
                        // if (this.activeName === 'mn2' && params.outCompetition === 'Others') {
                        //     // params.outCompetition = params.outCompetitionOthers
                        // }

                        if (!params.memberId) {
                            this.$message({
                                type: 'error',
                                message: 'Please athlete input'
                            })
                            return false
                        }

                        Object.assign(params, { athleteName: this.athleteData.name })
                        // if (this.pageType !== 'Classification' && this.pageType !== 'Medication' && params.followUp.userIds.length === 0 && params.followUp.groupIds.length === 0) {
                        //     this.$message({
                        //         type: 'error',
                        //         message: 'Please followUp input'
                        //     })
                        //     return false
                        // }

                        params.grantAccess = JSON.stringify(params.grantAccess)
                        params.followUp = JSON.stringify(params.followUp)
                        delete params.followUpNames
                        delete params.grantAccessNames


                      if ((this.pageType === 'Medication' && (this.activeName === 'mn3' || this.activeName === 'mn1'))) {
                        delete params.followUp
                      }
                        // debug
                        // console.log('params', params)
                        // console.log('grantAccessData', this.grantAccessData)
                        // console.log('followUpData', this.followUpData)
                        // console.log(this.uploadFormat(fileList))
                        // return false
                        if (params.id) {
                            delete params.creatorId
                            delete params.category
                            delete params.status
                            delete params.updateTime
                            params.type = this.types(this.activeName)
                            var url = '/medical/sport_medical/modify'
                            if (this.pageType === 'SportScience') {
                                url = '/medical/sport_science/modify'
                            }
                            if (this.pageType === 'Classification') {
                                url = '/medical/classification/modify'
                            }
                            if (this.pageType === 'Medication') {
                                url = '/medical/medication/modify'
                            }
                            this.openLoading(true)
                            modifyMedical(url, params).then(response => {
                                // eslint-disable-next-line no-unused-vars
                                const data = response.result
                                if (response.status === 0) {
                                    // this.$router.push({ path: '/medical/index?tab=tab1' })
                                  if (operation === 'publish') {
                                    this.onPublish()
                                  } else {
                                    this.getinfo(this.pageType, params.id)
                                    this.$message({
                                      type: 'success',
                                      message: response.msg
                                    })
                                  }
                                }
                                this.openLoading(false)
                            })
                        } else {
                            params.type = this.types(this.activeName)
                            if (this.userType !== 'ADMIN') {
                                // params.grantAccess = params.fllowUp
                            }
                            // eslint-disable-next-line no-redeclare
                            var url = '/medical/sport_medical/save'
                            if (this.pageType === 'SportScience') {
                                url = '/medical/sport_science/save'
                            }
                            if (this.pageType === 'Classification') {
                                url = '/medical/classification/save'
                            }
                            if (this.pageType === 'Medication') {
                                url = '/medical/medication/save'
                            }
                            this.openLoading(true)
                            addMedical(url, params).then(response => {
                                const data = response.result
                                if (response.status === 0) {
                                    this.$message({
                                        type: 'success',
                                        message: response.msg
                                    })
                                    this.getinfo(this.pageType, data.id)
                                    this.$router.push({ path: `/medical/newCase?page=${this.pageType}&type=${this.pageType === 'Classification' ? 'CLASSIFICATION' : data.type}&id=${data.id}&target=blank` })
                                }
                                console.log('addMedical--', this.info, data)
                                this.openLoading(false)
                            })
                        }
                    }
                })
            },
            onPublish() {
                var url = '/medical/sport_medical/place'
                if (this.pageType === 'SportScience') {
                    url = '/medical/sport_science/place'
                }
                if (this.pageType === 'Classification') {
                    url = '/medical/classification/place'
                }
                if (this.pageType === 'Medication') {
                    url = '/medical/medication/place'
                }
                placeMedical(url, { id: this.info.id }).then(response => {
                    if (response.status === 0) {
                        this.$message({
                            type: 'success',
                            message: response.msg
                        })
                        this.getinfo(this.pageType, this.info.id)
                    }
                })
                console.log('onPublish--', this.info)
            },
            getinfo(pageType, id) {
                // eslint-disable-next-line no-unused-vars
                    var url = ''
                    if (pageType === 'SportScience') {
                        url = '/medical/sport_science/query_info'
                    }
                    if (pageType === 'Classification') {
                        url = '/medical/classification/query_info'
                    }
                    if (pageType === 'Medication') {
                        url = '/medical/medication/query_info'
                    }
                    getMedicalInfo(url, { id: id }).then(response => {
                      const data = response.result
                      if (typeof (data.bodyDesc) !== 'object') {
                        data.bodyDesc = this.info.bodyDesc
                      }

                      if (this.activeName === 'sm4') {
                        if (data.bodyDesc.physiotherapy.diagnosisImg) {
                          data.bodyDesc.physiotherapy.diagnosisImg = JSON.parse(data.bodyDesc.physiotherapy.diagnosisImg)
                        } else {
                          data.bodyDesc.physiotherapy.diagnosisImg = ''
                        }
                      }

                        // data.followUp = this.info.fllofollowUpwUp
                        if (data.followUp) {
                          data.followUp.userIds = []
                        } else {
                          data.followUp = this.info.followUp
                        }
                        if (data.grantAccess) {
                          data.grantAccess.userIds = []
                        } else {
                          data.followUp = this.info.grantAccess
                        }
                        // data.grantAccess = this.info.grantAccess
                        data.type = data.category ? data.category : data.type
                        data.fileUp = data.fileUp || []
                        data.whereaFileUp = data.whereaFileUp || []
                        // data.sportStatusOthers = data.sportStatusOthers || ''
                        data.sports = data.sports || ''
                        data.venue = data.venue || ''
                        data.typeTest = data.typeTest || ''
                        data.classSports = data.classSports || ''

                        data.categoryType = data.categoryType || ''
                        // if (this.activeName === 'mn1' && (data.sportStatus !== 'International Federation Testing Pool' || data.sportStatus !== 'Hong Kong Eite Testing Pool' || data.sportStatus !== 'Hong Kong Registered Testing Pool')) {
                        //     // data.sportStatusOthers = data.sportStatus
                        //     data.sportStatus = 'Others'
                        // }
                        //
                        // if (this.activeName === 'mn2' && (data.inCompetition !== 'Not Prohibited' || data.inCompetition !== 'Prohibited' || data.inCompetition !== 'Route Dependent' || data.inCompetition !== 'Sports Dependent')) {
                        //     data.inCompetitionOthers = data.inCompetition
                        //     data.inCompetition = 'Others'
                        // }
                        //
                        // if (this.activeName === 'mn2' && (data.outCompetition !== 'Not Prohibited' || data.outCompetition !== 'Prohibited' || data.outCompetition !== 'Route Dependent' || data.outCompetition !== 'Sports Dependent')) {
                        //     data.outCompetitionOthers = data.outCompetition
                        //     data.outCompetition = 'Others'
                        // }


                      if (pageType === 'Classification') {
                        if (data.sportsStatus !== 'Review + F xDate') {
                          data.datePicker = ''
                        }
                      }
                        this.info = data
                        if (data.lastName || data.firstName) {
                            this.athleteData.name = `${data.lastName} ${data.firstName}`
                        }
                        if (data.followUpNames && data.followUpNames.length > 0) {
                            this.followUpData.list = []
                            for (var i in data.followUpNames) {
                                if (data.followUpNames[i].type === 'USER') {
                                    this.followUpData.list.push({ name: data.followUpNames[i].lastName + ' ' + data.followUpNames[i].firstName, id: data.followUpNames[i].id })
                                }
                            }
                        }
                        if (data.grantAccessNames && data.grantAccessNames.length > 0) {
                            this.grantAccessData.list = []
                            for (var ii in data.grantAccessNames) {
                                if (data.grantAccessNames[ii].type === 'USER') {
                                    this.grantAccessData.list.push({
                                        name: data.grantAccessNames[ii].lastName + ' ' + data.grantAccessNames[ii].firstName,
                                        id: data.grantAccessNames[ii].id
                                    })
                                }
                            }
                        }
                        // this.info.modify = 0
                        if (this.info.modify === 1) {
                            this.inputReadonly = false
                            // this.info.status = 'DRAFT'
                        } else {
                            this.inputReadonly = true
                            // this.info.status = 'PUBLISH'
                        }

                        // if (this.info.inCompetition && !this.in_array(this.info.inCompetition, competitionArray)) {
                        //     this.info.inCompetitionTxt = this.info.inCompetition
                        // }
                        // if (this.info.outCompetition && !this.in_array(this.info.outCompetition, competitionArray)) {
                        //     this.info.outCompetitionTxt = this.info.outCompetition
                        // }
                        this.openLoading(false)
                    })
                    this.fetchData()
                    // console.log(this.info)
            },
            onBack() {
                if (this.target === 'blank') {
                    console.log(this.$route)
                } else {
                    this.$router.back(-1)
                }
            },
            handleChange(file, fileList) {
               this.info.fileUp = fileList.slice(-3)
            },
            beforeAvatarUpload(file) {
              const isLt2M = file.size / 1024 / 1024 < 10
              if (!isLt2M) {
                this.$message.error('The max. size of each file is 10MB!')
              }
              return isLt2M
            },
            handleChange2(file, fileList) {
               this.info.whereaFileUp = fileList.slice(-3)
            },
            handlePreview(file) {
                let href = file.url
                if (!file.url) {
                  href = file.response.result
                }
                window.open(href, '_blank')
            },
            handleClick(tab, event) {
                console.log(tab.name)
                console.log(this.types(tab.name))
                if (tab.name) {
                    this.activeName = tab.name
                    this.fetchData()
                }
            },
            types(a) {
                switch (a) {
                    case 'sm1':
                        return 'GENERAL_PRACTITIONER'
                        // eslint-disable-next-line no-unreachable
                        break
                    case 'sm2':
                        return 'ORTHOPEDICE'
                        // eslint-disable-next-line no-unreachable
                        break
                    case 'sm3':
                        return 'PROSTHETICS_ORTHOTICS'
                        // eslint-disable-next-line no-unreachable
                        break
                    case 'sm4':
                        return 'PHYSIOTHERAPY'
                        // eslint-disable-next-line no-unreachable
                        break
                    case 'sm5':
                        return 'OPHTHALMOLOGY'
                        // eslint-disable-next-line no-unreachable
                        break
                    case 'tab1':
                        return 'NUTRITION'
                        // eslint-disable-next-line no-unreachable
                        break
                    case 'tab2':
                        return 'PSYCHOLOGY'
                        // eslint-disable-next-line no-unreachable
                        break
                    case 'mn1':
                        return 'DOPING'
                        // eslint-disable-next-line no-unreachable
                        break
                    case 'mn2':
                        return 'MEDICATION'
                        // eslint-disable-next-line no-unreachable
                        break
                    case 'mn3':
                        return 'TUE'
                        // eslint-disable-next-line no-unreachable
                        break
                    default:
                        return 'OTHERS'
                }
            },
            in_array(search, array) {
                for (var i in array) {
                    // eslint-disable-next-line eqeqeq
                    if (array[i] === search) {
                        return true
                    }
                }
                return false
            }
        },

        beforeRouteLeave(to, from, next) {
            // this.$confirm('Do you really want to leave? you have unsaved changes?', '提示', {
            //     confirmButtonText: 'Yes',
            //     cancelButtonText: 'ON',
            //     type: 'warning'
            // }).then(() => {
            //     next()
            // }).catch(() => {
            //     next(false)
            // })
            next()
        }
    }
</script>
<style midia="print" lang="scss">
  @media print{
    .no-print {display:none;}
    body {
      .add-page .ul-input{
            // display: -webkit-box;
            // display: -ms-flexbox;
            // display: flex !important;
            // -webkit-box-pack: center;
            // -ms-flex-pack: center;
            // justify-content: center;
            // -webkit-box-align: center;
            // -ms-flex-align: center;
            // align-items: center;
            margin-bottom: 15px;
            .el-checkbox{
              width:auto;
              float: left;
              margin-left:8px ;
            }
      }
      #canvas,.canvas_box{
        display: block !important;
        width:100% !important;
      }
      #control{
        display: none !important;
      }
      // #canvasImg{display: block !important;}
      // #canvas{
      //   position: absolute !important;
      //   z-index: 33;
      // }
    }
  }
 </style>
<style>
/* #canvas,.canvas_box{
    width:300px !important;
    display: block !important;
  } */
</style>
